<html>
    <head>
        <title>创建视图组件对应的Razor视图</title>
    </head>
    <body>
        <script>
            /*
                
                                        3、创建视图组件的 Razor 视图     
                                        
                                                    ①、创建 Views/Shared/Components 文件夹。 此文件夹 必须 命名为 Components。
                                                    
                                                    ②、创建 Views/Shared/Components/PriorityList 文件夹。

                                                                      此文件夹名称必须与视图组件类的名称相匹配，或者与类的名称减去后缀相匹配。

                                                                      如果使用了 ViewComponent 属性，则类名称需要匹配指定的属性。
                                                            
                                                    ③、创建  Views/Shared/Components/PriorityList/Default.cshtml  Razor视图文件：

                                                        eg:
                                                                @model IEnumerable<ViewComponentSample.Models.TodoItem>

                                                                <h3>Priority Items</h3>
                                                                <ul>
                                                                    @foreach (var todo in Model)
                                                                    {
                                                                        <li>@todo.Name</li>
                                                                    }
                                                                </ul>  

                                                            Razor 视图获取并显示TodoItem列表。如果视图组件 InvokeAsync 方法不传递视图名称，则an照约定使用 Default.cshtml 作为视图。

                                                            要替代特定控制器的默认样式，请将视图添加到控制器特定的视图文件夹
                                                            
                                                                （例如 Views/ToDo/Components/PriorityList/Default.cshtml）。

                                                            如果视图组件特定于控制器，则可以将其添加到特定于控制器的文件夹。 
                                                            
                                                                例如，Views/ToDo/Components/PriorityList/Default.cshtml 是特定于控制器的。
                                                            


                                                    ④、将包含优先级列表组件调用的 div 添加到 Views/ToDo/index.cshtml 文件底部：
                                                            
                                                                <div>
                                                                    Maximum Priority: @ViewData["maxPriority"] <br />
                                                                    Is Complete:  @ViewData["isDone"]
                                                                    @await Component.InvokeAsync("PriorityList",
                                                                                    new { 
                                                                                        maxPriority =  ViewData["maxPriority"],
                                                                                        isDone = ViewData["isDone"]  }
                                                                                    )
                                                                </div>

                                                            标记 @await Component.InvokeAsync 显示调用视图组件的语法。

                                                            第一个参数是要调用的组件的名称。后续参数将传递给该组件。 InvokeAsync 可以采用任意数量的参数。

                                                            
                                                            可以直接从控制器调用视图组件：

                                                                public IActionResult IndexVC(int maxPriority = 2, bool isDone = false)
                                                                {
                                                                    return ViewComponent("PriorityList",
                                                                        new { 
                                                                        maxPriority = maxPriority,
                                                                        isDone = isDone
                                                                        });
                                                                }
            */
        </script>
    </body>
</html>